<template>
  <div class="screenContainer">
    <header class="screenHeader">
      <div>
        <img src="@/assets/image/header_border_dark.png" alt />
      </div>
          <a href="javascript:void(0);" title="最小化"><i class="el-icon-switch-button minButton" @click="minScreen"></i></a>
      <span class="title">宿管系统</span>
    </header>
    <div style="display : flex;padding-bottom:5px"  >
      <div class="firstContainer">
        <div class="datetime">
          <div>宿舍出勤情况</div>
          <div>{{ lastDay }}</div>
        </div>
        <div class="title">
          <div class="sdAttenceClass">宿舍</div>
          <div class="sdAttenceClass">应到</div>
          <div class="sdAttenceClass">实到</div>
          <div class="sdAttenceClass">缺勤</div>
        </div>
        <div class="slideContent">
          <ul class="workList">
            <li v-for="item in dormitoryCome" :key="item.bdormitoryId">
              <span>{{item.buildingNo}}</span>
              <span>{{item.shouldArrive}}人</span>
              <span>{{item.actualArrive}}人</span>
              <span>{{item.unArrive}}人</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="secondContainer">
        <div class="title">{{brokenTitle}}请假记录</div>
        <div class="pre" v-if="false">&lt;</div>
        <div ref="broken" style="width: 80%;height:100%; margin: -25px auto 0"></div>
        <div class="next" v-if="false">&gt;</div>
      </div>

      <div class="firstContainer">
        <div class="datetime">
          <div>班级出勤情况</div>
          <div>{{ today }}</div>
        </div>
        <div class="title">
          <div class="comeClass">班级</div>
          <div class="comeClass">应到</div>
          <div class="comeClass">实到</div>
          <div class="comeClass">迟到</div>
        </div>
        <div class="slideContent">
          <ul class="workListTwo">
            <li v-for="item in classCome" :key="item.id">
              <span>{{item.class_name}}</span>
              <span>{{item.shouldArrive}}人</span>
              <span>{{item.actualArrive}}人</span>
              <span>{{item.laterArrive}}人</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="whirdContainer">
        <div class="tablea">
          <span class="allStyle">宿舍报修总量</span>
          <ul>
            <li>报修总量：{{ dormitoryRepair.repairCount }}</li>
            <li>维修中：{{ dormitoryRepair.processCount }}</li>
            <li>剩余报修量：{{ dormitoryRepair.leftRepairCount }}</li>
          </ul>
        </div>
        <div class="tableb">
          <span class="allStyle">校园报修总量</span>
          <ul>
            <li>报修总量：{{ schoolRepair.repairCount }}</li>
            <li>维修中：{{ schoolRepair.processCount }}</li>
            <li>剩余报修量：{{ schoolRepair.leftRepairCount }}</li>
          </ul>
        </div>
      </div>

      <div class="secondContainer">
        <div class="title">违纪总数</div>
        <div ref="circle" style="width: 90%;height:70%; margin:40px auto 0"></div>
      </div>

      <div class="whirdContainer">
        <div class="tablec">
          <div>
              <div class="allStyle zhiban">{{today}}启蒙星值班人员</div>
            <ul>
              <li v-for="item in qmxPerson" :key="item.id">
                <span>{{item.userName}}</span>
                <span>{{item.dutyTypeName}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="tabled">
          <div>
            <div class="allStyle zhiban">{{today}}BCSP值班人员</div>
            <ul>
              <li v-for="item in bcspPerson" :key="item.id">
                <span>{{item.userName}}</span>
                <span>{{item.dutyTypeName}}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- <div class="tableb">
          <span>违纪量</span>
          <ul>
            <li>违纪人：</li>
            <li>班级：</li>
            <li>类型：</li>
          </ul>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  findLastDaySdAttenceData,
  findClassWeekLeaveData,
  findTodayClassAttenceData,
  findSdRepairCount,
  findClassRepairCount,
  findTodayDutyPerson,
  findDvCount
} from "@/api/home/home";
import moment from "moment"

export default {
  data() {
    return {
      // 折线图数组
      brokenData: [],
      // 折线图X轴
      brokenX: [],
      // 折线图Y轴
      brokenY: [],
      // 折线图标题
      brokenTitle: "",
      // 折线图实例
      myBrokenChart: null,
      // 折线图配置项
      option: {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          borderWidth: 1
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLabel: {
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)"
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: []
          }
        ]
      },
      // 折线图索引
      brokenIndex: 0,
      // 折线图定时器
      timer: null,
      // 宿舍出勤情况数据
      dormitoryCome: [],
      // 班级出勤情况数据
      classCome: [],
      // 宿舍报修数量
      dormitoryRepair: {},
      // 校园报修数量
      schoolRepair: {},
      // 值班人员
      dutyPerson: [],
      // 启蒙星值班人员
      qmxPerson: [],
      // BCSP
      bcspPerson: [],
      // 请求到的违纪人数
      dvData: [],
      
      // 饼图展示数据
      vdCountAll: [],
      // 
      today:'',
      lastDay:'',
    };
  },
  created() {
    this.getClassWeekLeaveData();
    this.getLastDaySdAttenceData();
    this.getTodayClassAttenceData();
    this.getSdRepairCount();
    this.getClassRepairCount();
    this.getTodayDutyPerson();
    this.getDvCount();
    this.getDate();
  },
  mounted() {
    this.makeBroken();
    this.makeCircle();
  },
  methods: {
    /**最小化**/ 
    minScreen(){
      this.$router.push({
            path:'/index'
        })
    },
    /**获取日期**/
    getDate(){
      this.today = moment(Date.now()).format('YYYY-MM-DD');
      this.lastDay = moment(Date.now() - 86400000).format('YYYY-MM-DD');
    },
    /**获取违纪总数**/

    getDvCount() {
      findDvCount().then(res => {
        console.log(res);
        this.dvData = res.data;
        for (var i = 0; i < this.dvData.length; i++) {
          //1 2 3 4 5 6 7 8 11 14 16 17 18 20
          if ("1" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "着装不得体";
          }
          if ("2" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "上课睡觉";
          }
          if ("3" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "上课玩游戏";
          }
          if ("4" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "外出";
          }
          if ("5" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "抽烟";
          }
          if ("6" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "其他";
          }
          if ("7" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "迟到";
          }
          if ("8" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "未戴校牌";
          }
          if ("11" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "校园抽烟";
          }
          if ("14" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "打牌赌博";
          }
          if ("16" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "谩骂他人";
          }
          if ("17" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "携带违禁品";
          }
          if ("18" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "宿舍抽烟";
          }
          if ("20" === this.dvData[i].dvType) {
            this.dvData[i].dvType = "其他";
          }
        }
        this.dvData.forEach(item=>{
          this.vdCountAll.push({
            value:item.nums,
            name:item.dvType
          })
        })
        this.makeCircle()
      });
    },
    /**查询当天值班人员**/

    getTodayDutyPerson() {
      findTodayDutyPerson().then(res => {
        this.dutyPerson = res.data;
        this.qmxPerson = this.dutyPerson.filter(item => {
          return item.dutyDeptName == "启蒙星";
        });
        this.bcspPerson = this.dutyPerson.filter(item => {
          return item.dutyDeptName == "BCSP";

         
        });
      });
    },
    /**查询校园报修数量**/

    getClassRepairCount() {
      findClassRepairCount().then(res => {
        this.schoolRepair = res.data;
        console.log(this.schoolRepair);
      });
    },
    /**查询宿舍报修数量**/

    getSdRepairCount() {
      findSdRepairCount().then(res => {
        this.dormitoryRepair = res.data;
        // console.log(this.dormitoryRepair)
      });
    },
    /**查询班级当天出勤情况**/

    getTodayClassAttenceData() {
      findTodayClassAttenceData().then(res => {
        this.classCome = res.data;
        // console.log(res)
      });
    },
    /**查询班级一周请假情况以及折线图数据切换**/
    getClassWeekLeaveData() {
      findClassWeekLeaveData().then(res => {
        console.log(res);
        this.brokenData = res.data;
        this.brokenTitle = this.brokenData[0].brokenTitle;
        this.option.xAxis[0].data = this.brokenData[0].brokenX;
        this.option.series[0].data = this.brokenData[0].brokenY;
        // console.log(this.myBrokenChart)

        this.myBrokenChart.setOption(this.option, true);

        this.timer = setInterval(() => {
          this.brokenIndex++;
          if (this.brokenIndex > this.brokenData.length - 1) {
            this.brokenIndex = 0;
          }
          this.brokenTitle = this.brokenData[this.brokenIndex].brokenTitle;
          this.option.xAxis[0].data = this.brokenData[this.brokenIndex].brokenX;
          this.option.series[0].data = this.brokenData[
            this.brokenIndex
          ].brokenY;

          this.myBrokenChart.setOption(this.option, true);
        }, 3000);
      });
    },
    /**查找前一天宿舍出勤情况**/
    getLastDaySdAttenceData() {
      findLastDaySdAttenceData().then(res => {
        this.dormitoryCome = res.data;
        // console.log(this.dormitoryCome)
      });
    },
    makeBroken() {
      this.myBrokenChart = echarts.init(this.$refs.broken);
      this.myBrokenChart.setOption(this.option, true);
      // window.addEventListener("resize", function() {
      //       this.myBrokenChart.resize();
      // }); 
    },

    /**饼图**/
    makeCircle() {
      const myChart = echarts.init(this.$refs.circle);
      const option = {
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "white"
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "95%",
            data: this.vdCountAll,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowOffsetX: 0
              }
            }
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.screenContainer {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
  .secondContainer {
    width: 50%;
    background: #202733;
    border-radius: 20px;
    margin-top: 20px;
    position: relative;
    .pre {
      position: absolute;
      top: 42%;
      left: 3%;
      font-size: 20px;
    }
    .next {
      position: absolute;
      top: 42%;
      left: 93%;
      font-size: 20px;
    }
    .title {
      font-size: 20px;
      text-align: center;
      height: 24px;
      padding: 10px 0 0 0;
      color: #778591;
      font-weight: bold;
    }
  }

  // padding: 20px;
  .firstContainer {
    width: 25%;
    background: #202733;
    border-radius: 20px;
    margin: 20px 20px 0;
    height: 32vh;
    overflow: hidden;
    .slideContent {
      height: 75%;
      overflow: hidden;
      padding: 10px 10px;
    }
    .workList {
      list-style: none;
      margin: 0;
      padding: 10px 10px;
      animation: rowup 200s linear infinite;
        li{
          padding-bottom: 5px;
          font-size: 14px;
          color: #abb6bd;
          span{

          }
        }
      span:nth-child(1) {
        display: inline-block;
        width: 50%;
      }
      span:nth-child(2) {
        display: inline-block;
        width: 15%;
      }
      span:nth-child(3) {
        display: inline-block;
        width: 15%;
      }
      span:nth-child(4) {
        display: inline-block;
        width: 15%;
      }
    }
    .title {
      padding: 10px 20px 20px;
      display: flex;
      div:nth-child(1) {
        width: 50%;
      }
      div:nth-child(2) {
        width: 15%;
        text-align: center;
      }
      div:nth-child(3) {
        width: 15%;
        text-align: center;
      }
      div:nth-child(4) {
        width: 15%;
        text-align: center;
      }
    }
  }
}
.whirdContainer {
  padding: 20px 20px 0;
  width: 25%;
  .tablea {
    width: 100%;
    height: 22.4vh;
    padding: 10px 20px;
    background: #202733;
    border-radius: 20px;
    span {
      display: block;
      padding: 0 0 10px 10px;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        padding: 10px;
        font-size: 14px;
  color: #abb6bd;
      }
    }
  }
  .tableb {
    width: 100%;
    padding: 10px 20px;
    background: #202733;
    border-radius: 20px;
    margin-top: 20px;
    height: 22.4vh;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        padding: 10px;
        font-size: 14px;
        color: #abb6bd;
      }
    }

    span {
      display: block;
      padding: 0 0 10px 10px;
    }
  }
  .tablec {
    height: 22vh;
    width: 100%;
    padding: 10px 20px;
    background: #202733;
    border-radius: 20px;
    span:nth-child(1) {
      display: inline-block;
      padding: 0 0 10px 0;
      width: 40%;
    }
    span:nth-child(2) {
      display: inline-block;
      padding: 0 0 10px 0;
      width: 55%;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        padding: 6px;
        font-size: 14px;
  color: #abb6bd;
      }
    }
  }
  .tabled {
    height: 22.2vh;
    margin-top: 26px;
    width: 100%;
    padding: 10px 20px;
    background: #202733;
    border-radius: 20px;
    span:nth-child(1) {
      display: inline-block;
      padding: 0 0 10px 0;
      width: 40%;
    }
    span:nth-child(2) {
      display: inline-block;
      padding: 0 0 10px 0;
      width: 55%;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        padding: 5px 5px  5px;
        font-size: 14px;
  color: #abb6bd;
      }
    }
  }
}

.footer {
  // background: red;
  display: flex;
  height: 50vh;
}
@-webkit-keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.screenHeader {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
}
.datetime {
  padding: 10px 20px;
  color: #778591;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.workListTwo {
  list-style: none;
  margin: 0;
  padding: 10px 10px;
  animation: rowup 80s linear infinite;
  span:nth-child(1) {
    display: inline-block;
    width: 50%;
  }
  span:nth-child(2) {
    display: inline-block;
    width: 15%;
  }
  span:nth-child(3) {
    display: inline-block;
    width: 15%;
  }
  span:nth-child(4) {
    display: inline-block;
    width: 15%;
  }
  li{
    padding-bottom: 5px;
          font-size: 14px;
          color: #abb6bd;
  }
}
.sdAttenceClass{
  color: #778591;
  font-size: 16px;
  font-weight: bold;
}
.comeClass{
  color: #778591;
  font-size: 16px;
  font-weight: bold;
}
.allStyle{
  color: #778591;
  font-size: 16px;
  font-weight: bold;
}
.sushe{
  padding-bottom: 5px;
  font-size: 14px;
  color: #abb6bd;
}
.zhiban{
  padding: 5px;
}
.minButton{
  position: absolute;
  left: 97%;
  top: 17%;
  font-size: 20px;
  color: #778591;

}
</style>